<template>
	<van-cell-group>
		<van-field center :label="label" :title-width="titleWidth?titleWidth:'7em'" clickable placeholder="请选择" required @click-input="this.show = true"
			v-model="result"
			readonly
			use-button-slot>
			<text slot="button" size="small" type="primary">
			>
			</text>
		</van-field>

		<van-popup :show="show" round position="bottom" @click-overlay="closePop" bind:close="onClose" >
			<van-picker class="picker" show-toolbar :columns="columns" visible-item-count="5" @cancel="closePop" @confirm="confirmOk" :value-key="showKey" :default-index="defaultIndex">

			</van-picker>
		</van-popup>
	</van-cell-group>

</template>

<script>
	export default {
		name: "selectPop",
		props: {
			columns: {
				type: Array,
				default: []
			},
			label:{
				type:String,
				default:''
			},
			showKey:{
				type:String,
				default:''
			},
			valueKeyStr:{
				type:String,
				default:'value'
			},
			value:{
				type:String,
				default:''
			},
			titleWidth:{
				type:String,
				default:'7em'
			}
		},
		mounted() {
			if(this.value){
				this.result = this.columns.find(item=>{
					return item[this.valueKeyStr] == this.value
				})[this.showKey]
				this.defaultIndex = this.columns.findIndex(item=>{
					return item[this.valueKeyStr] == this.value
				})
				// console.log(this.defaultIndex,this.result)
			}
		},
		data() {
			return {
				show: false,
				result:undefined,
				defaultIndex:''
			};
		},
		methods: {
			onClose() {
			},
			
			closePop() {
				this.show = false
			},
			confirmOk(value){
				this.result = value.detail.value[this.showKey]
				this.show = false
				this.$emit('change',value.detail.value)
			}
		}
	}
</script>

<style>

</style>